// list业务模块
console.log( 'list业务模块' )

import axios from 'axios'
import './islogin.js'

let count = 0 // 记录总条数
let pages = 0 // 记录总页数
let page = 1 // 记录当前页码
let size = 4 // 记录每页条数

// 进入页码获取第一页数据并渲染
getPageData(page,size)

// 获取分页数据
function getPageData(page,size){
    // 发送获取分页数据请求
    axios({
        method: 'post',
        url: 'http://localhost:8080/goods/getdata',
        data: {page,size}
    })
    .then((res)=>{
        // 判断是否获取到数据
        if (res.data.datas.length > 0) {
            count = res.data.count
            pages = res.data.pages
            console.log( count,pages )

            // 根据数据渲染表格
            // console.log( res.data.datas )// [{},{},{}...]
            renderTable(res.data.datas)

            // 根据数据渲染分页
            renderPages(page,pages)
        }
    })
}

// 渲染表格
function renderTable(datas){
    let tmp = `<tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品描述</th>
                <th>商品数量</th>
                <th>商品类型</th>
                <th>商品图片</th>
                <th>操作</th>
            </tr>`
    datas.forEach((item)=>{
        tmp += `<tr>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>${item.desc}</td>
                    <td>${item.num}</td>
                    <td>${item.type}</td>
                    <td><img src="${item.imgurl}" alt=""></td>
                    <td>
                    <button class="btn btn-success btn-xs">
                        <span class="glyphicon glyphicon-pencil"></span> 编辑
                    </button>
                    <button class="btn btn-danger btn-xs">
                        <span class="glyphicon glyphicon-remove"></span> 删除
                    </button>
                    </td>
                </tr>`
    })
    document.querySelector('.table').innerHTML = tmp
}

// 渲染分页
function renderPages(page,pages){
    let tmp = `<li class="prev">
                <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                </a>
            </li>`
    for (var i = 1; i <= pages; i++) {
        tmp += `<li><a href="#" class="num">${i}</a></li>`
    }
    tmp += `<li class="next">
            <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            </a>
        </li>`
    document.querySelector('.pagination').innerHTML = tmp
    // 给当前页添加选中状态
    document.querySelector('.pagination').children[page].className = 'active'
}


document.querySelector('.pagination').onclick = function (e){
    // console.log( e.target )// span a

    // 点击 上一页
    if ((e.target.tagName === 'SPAN' && e.target.parentNode.parentNode.className === 'prev') || e.target.parentNode.className === 'prev') {
        // 修改当前页码
        page--
        if (page === 0) {
            page = 1
        }

        // 渲染当前页表格数据
        getPageData(page,size)
    }

    // 点击 下一页
    if ((e.target.tagName === 'SPAN' && e.target.parentNode.parentNode.className === 'next') || e.target.parentNode.className === 'next') {
        // 修改当前页码
        page++
        if (page > pages) {
            page = pages
        }

        // 渲染当前页表格数据
        getPageData(page,size)
    }

    // 点击 某一页
    if (e.target.className === 'num') {
        // 修改当前页码
        page = e.target.innerText

        // 渲染当前页表格数据
        getPageData(page,size)
    }
}

// 关键字搜索
document.querySelector('.form-inline').onsubmit = function (e){
    // 阻止表单提交
    e.preventDefault()

    let wd = document.querySelector('#search-ipt').value
    // 空值判断
    if (!wd) {
        alert('搜索内容不能为空！')
        return
    }
    // 发送搜索请求
    axios({
        method: 'post',
        url: 'http://localhost:8080/goods/search',
        data: {wd}
    })
    .then((res)=>{
        // console.log( res.data.datas )
        if (res.data.datas.length > 0) {
            // 根据数据渲染表格
            renderTable(res.data.datas)
        }
        else{
            document.querySelector('.table').innerHTML = '<h1>暂无数据</h1>'
        }
    })
    .catch(()=>{
        document.querySelector('.table').innerHTML = '<h1>暂无数据</h1>'
    })
}

// 删除商品
document.querySelector('.table').onclick = function (e){
    console.log( 123456789 )
    if ((e.target.tagName === 'SPAN' && e.target.parentNode.classList.contains('btn-danger'))) {
        // 删除对应的数据
        let name = e.target.parentNode.parentNode.parentNode.firstElementChild.innerText
        axios({
            method: 'post',
            url: 'http://localhost:8080/goods/delete',
            data: {name}
        })
        .then((res)=>{
            alert(res.data.msg)
            if (res.data.code === 1) {
                // 获取数据渲染页面
                getPageData(page,size)
            }
        })
    }
    if (e.target.classList.contains('btn-danger')) {
        // 删除对应的数据
        let name = e.target.parentNode.parentNode.firstElementChild.innerText
        axios({
            method: 'post',
            url: 'http://localhost:8080/goods/delete',
            data: {name}
        })
        .then((res)=>{
            alert(res.data.msg)
            if (res.data.code === 1) {
                // 获取数据渲染页面
                getPageData(page,size)
            }
        })
    }
}